<template>
    <div>
        <div id="chart_Line" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "outLine",
    data() {
        return {
            //图表
            chart_Line: "",
            //配置
            option: {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["异常鸽", "残次品", "鸽蛋", "鸽粪", "肉鸽"],
                    textStyle: {
                        //图例文字的样式
                        color: "rgba(255,255,255,.6)",
                        // fontSize: 16,
                    },
                    left: "0%",
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                    right: "4.5%",
                    top: "8%",
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                        "八月",
                        "九月",
                        "十月",
                        "十一月",
                        "十二月",
                    ],
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,0.3)",
                        },
                    },
                },
                series: [
                    {
                        name: "异常鸽",
                        type: "line",
                        // stack: '总量', //去除，否则数据差值较大时会出现异常
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    },
                    {
                        name: "残次品",
                        type: "line",
                        // stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    },
                    {
                        name: "鸽蛋",
                        type: "line",
                        // stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    },
                    {
                        name: "鸽粪",
                        type: "line",
                        // stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    },
                    {
                        name: "肉鸽",
                        type: "line",
                        // stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    },
                ],
            },
        };
    },
    watch: {
        allProductionTypeLine: {
            deep: true,
            handler(newValue, oldValue) {
                if (this.chart_Line) {
                } else {
                    this.chart_Line = this.$echarts.init(
                        document.getElementById("chart_Line")
                    );
                }
                // console.log("基地出库月走势改变");
                // console.log(newValue);
                //图表数据
                let abnormalDoveData = [];
                let disabledDoveData = [];
                let doveEggsData = [];
                let doveShitData = [];
                let meetDoveData = [];

                newValue.forEach((item, index) => {
                    // that.option.series[0].data[index] = item.abnormalDove;
                    abnormalDoveData.push(item.abnormalDove);
                    disabledDoveData.push(item.disabledDove);
                    doveEggsData.push(item.doveEggs);
                    doveShitData.push(item.doveShit);
                    meetDoveData.push(item.meetDove);
                });

                this.option.series[0].data = abnormalDoveData;
                this.option.series[1].data = disabledDoveData;
                this.option.series[2].data = doveEggsData;
                this.option.series[3].data = doveShitData;
                this.option.series[4].data = meetDoveData;
                // console.log(that.option.series);
                // console.log(that.chart_Line);
                this.chart_Line.setOption(this.option);
                window.addEventListener("resize", () =>
                    this.chart_Line.resize()
                );
            },
        },
    },
    mounted() {
        this.makechart();
    },
    computed: {
        ...mapState({
            BaseInfo: (state) => state.Usersetting.BaseInfo,
        }),
    },
    props: {
        allProductionTypeLine: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        makechart() {
            if (this.BaseInfo.id) {
                this.$nextTick(() => {
                    this.chart_Line = this.$echarts.init(
                        document.getElementById("chart_Line")
                    );
                });
            }
        },
    },
};
</script>